<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录界面</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/signin.css" rel="stylesheet">
    
  </head>
  <body>

    <div class="container" >
    
    
     <c:if test="${isRegisterSuccessful=='true'}">
     <div class="alert alert-success alert-dismissible" style="width:500px;margin-left: 300px;" align="center" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>提示！</strong>注册成功，请等待审核！
</div>
    </c:if>
   

    
<c:choose>
		<c:when test="${isLoginSuccessful=='false'}">
               <div class="alert alert-danger alert-dismissible" style="width:500px;margin-left: 300px;" align="center" role="alert">
  				<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 				 <strong>警告！</strong><c:if test="${empty userName}">用户不存在！</c:if><c:if test="${!empty userName}">密码输入错误！</c:if>
				</div>
       </c:when>
       <c:when test="${isAdmit=='false'}">
               <div class="alert alert-danger alert-dismissible" style="width:500px;margin-left: 300px;" align="center" role="alert">
  				<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 				 <strong>警告！</strong>您注册的账号还未通过审核！
				</div>
       </c:when>
        
</c:choose>

      <form class="form-signin" action="login.action" method="post">
        <h2>请登录</h2>
        <input type="text" class="form-control" placeholder="用户名"  name="name" value="${userName}" required autofocus>
        <input type="password" class="form-control" placeholder="密码" name="pwd" required>
        <label class="checkbox">
          <input type="checkbox" value="remember-me"> 记住我
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
        <button type="button" class="btn btn-success btn-lg btn-block"
								data-toggle="modal" data-target="#inviteModal" onclick="createRequest()">注册</button>
      </form>
    </div> 


<div class="modal fade" id="inviteModal">
		<div class="modal-dialog">
			<div class="modal-content" style="width: 400px;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">用户注册</h4>
				</div>
				<div class="modal-body">
				<form method="POST" id="registerForm" action="register.action" >
				<table>
				
				<tr>
					<td>
					<div class="input-group has-error has-feedback" style="margin-top: 10px" id="nameDiv">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
  						<input name="userName" type="text" class="form-control" placeholder="姓名" id="nameInput" oninput="validateNameInput()">
					</div>
				</td>
					
					<td>
					<label class="control-label" for="nameInput"  style="color: #A94442;margin-bottom: 0px;margin-top: 8px;margin-left: 2px;" id="nameInfo" >必填</label>
					</td>
					</tr>
					
					<tr>
					<td>
					<div class="input-group has-error has-feedback" style="margin-top: 10px" id="pwdDiv">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
  						<input type="password" name="password" class="form-control" id="password" placeholder="密码" oninput="validatePwd()" maxlength="12"/>
					</div>
					</td>
					<td>
					<label class="control-label" for="password" style="color: #A94442;margin-bottom: 0px;margin-top: 8px;margin-left: 2px;" id="pwdInfo">请输入6~12位的密码</label>
					</td>
					</tr>
					
					<tr>
					<td>
					<div class="input-group has-error has-feedback" style="margin-top: 10px" id="deDiv">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-home"></span></span>
  						<select name="departmentSe" id="departmentSe" class="form-control" onchange="validateDepartment()">
                            <option value="-1">部门</option>
                        </select>
					</div>
					</td>
					<td>
					<label class="control-label" for="departmentSe" style="color: #A94442;margin-bottom: 0px;margin-top: 8px;margin-left: 2px;" id="deInfo">请选择部门</label>
					</td>
					</tr>
					
					<tr>
					<td>
					<div class="input-group has-error has-feedback" style="margin-top:10px" id="phoneDiv">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span>
  						<input type="text" name="phone" class="form-control" placeholder="电话" id="phoneInput" oninput="validatePhoneInput()"/>
					</div>
					</td>
					<td>
					<label class="control-label" for="phoneInput" style="color: #A94442;margin-bottom: 0px;margin-top: 8px;margin-left: 2px;" id="phoneInfo">必填</label>
					</td>
					</tr>
					<tr>
					<td>
					<div class="input-group" style="margin-top: 10px;font-size: 20px">
						<span class="input-group-addon"><span class="glyphicon glyphicon-adjust"></span></span>
						<span class="input-group-addon form-control">
						<input type="radio" name="sex" value="0" checked/>男&nbsp;&nbsp;&nbsp;
  						<input type="radio" name="sex" value="1"/>女
  					    </span>
					</div>
					</td>
					<td></td>
					</tr>
					
					
					<tr>
					<td>
					<div class="input-group" style="margin-top:10px">
  						<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
  						<input type="text" name="registerCode" class="form-control" placeholder="注册码" maxlength="20"/>
					</div>
					</td>
					<td>
					<label class="control-label"  style="margin-bottom: 0px;margin-top: 8px;margin-left: 2px;">可不填</label>
					</td>
					</tr>
					
				</table>
				</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
					<button type="button" class="btn btn-primary" onclick="validateSubmit()">确定</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

  </body>

  <script src="js/jquery-2.0.1.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script type="text/javascript">
    	function validatePwd() {
    		var pwdInput=document.getElementById("password");
    		if(pwdInput.value.length>=6&&pwdInput.value.length<=12){
    			$("#pwdDiv").attr("class","input-group has-success has-feedback");
    			$("#pwdInfo").css("color","green");
    			$("#pwdInfo").html("<span class='glyphicon glyphicon-ok'></span>");
    			}
    		else{
    			$("#pwdDiv").attr("class","input-group has-error has-feedback");
    			$("#pwdInfo").css("color","#A94442");
    			$("#pwdInfo").html("请输入6~12位的密码");
    		}
    	}
    	
    	function validateDepartment() {
    		var currSelectValue = document.getElementById("departmentSe").value;    
    		if(currSelectValue!=-1){
    			$("#deDiv").attr("class","input-group has-success has-feedback");
    			$("#deInfo").css("color","green");
    			$("#deInfo").html("<span class='glyphicon glyphicon-ok'></span>");
    			}
    		else{
    			$("#deDiv").attr("class","input-group has-error has-feedback");
    			$("#deInfo").css("color","#A94442");
    			$("#deInfo").html("请选择部门");
    		}
    	}
    	
    	function validateNameInput(){
    		var nameInput=document.getElementById("nameInput");
    		var phoneInput=document.getElementById("phoneInput");
    		if(nameInput.value.length>=1){
    			$("#nameDiv").attr("class","input-group has-success has-feedback");
    			$("#nameInfo").css("color","green");
    			$("#nameInfo").html("<span class='glyphicon glyphicon-ok'></span>");
    			}
    		else{
    			$("#nameDiv").attr("class","input-group has-error has-feedback");
    			$("#nameInfo").css("color","#A94442");
    			$("#nameInfo").html("必填");
    		}
    	}
    	function validatePhoneInput(){
    		var phoneInput=document.getElementById("phoneInput");
    		if(phoneInput.value.length>=1){
    			$("#phoneDiv").attr("class","input-group has-success has-feedback");
    			$("#phoneInfo").css("color","green");
    			$("#phoneInfo").html("<span class='glyphicon glyphicon-ok'></span>");
    			}
    		else{
    			$("#phoneDiv").attr("class","input-group has-error has-feedback");
    			$("#phoneInfo").css("color","#A94442");
    			$("#phoneInfo").html("必填");
    		}
    	}
    	
    	function validateSubmit(){
    		var validateInfo="input-group has-success has-feedback";
    		var form=document.getElementById("registerForm");
    		var value=$("#phoneDiv").attr("class");
    		if(value == validateInfo)
    			form.submit();
    	}
    	
    	function createRequest(){
    		getAllDepartments_request = false;
    		var url="getAllDepartments.action";
    		if(window.XMLHttpRequest){
    			getAllDepartments_request = new XMLHttpRequest();
    		}
    		else if(window.ActiveXObject){
    			try{
    				getAllDepartments_request=new ActiveXObject("Msxm12.XMLHTTP");
    			}catch (e){
    				try{
    				getAllDepartments_request=new ActiveXObject("Microsoft.XMLHTTP");
    				}catch (e){}
    			}
    		}
    		if(!getAllDepartments_request){
    			alert("不能创建X对象");
    			return false;
    		}
    		getAllDepartments_request.onreadystatechange = function(){
    			getDepartment();
    		};
    		getAllDepartments_request.open('GET', url, true);
    		getAllDepartments_request.send(null);
    	}
    	
    	function getDepartment(){
    		if(getAllDepartments_request.readyState==4){
    			if(getAllDepartments_request.status==200){
    				
    				var arr = getAllDepartments_request.responseText;
    				jsonssDeparts=eval("("+arr+")");
    				var selDepartments = document.getElementById("departmentSe");
    				selDepartments.options.length=0;
    				$("#deDiv").attr("class","input-group has-error has-feedback");
        			$("#deInfo").css("color","#A94442");
        			$("#deInfo").html("请选择部门");
    				 var department = new Option("部门", -1);
					  selDepartments.options.add(department);
    					for(var i=0;i<jsonssDeparts.length;i++){
    						  var department = new Option(jsonssDeparts[i][2], jsonssDeparts[i][1]);
    						  selDepartments.options.add(department);
    					}
    				}//200
    				
    				}//4
    			
    	}//function
    </script>
</html>
